
<article class="cl pd-20" >
    <form  class="form form-horizontal" id="form-add">
        <div class="row cl">
            <label class="form-label col-xs-3 " style="text-align: center;"><span class="c-red">*</span>用户名：</label>
            <div class="formControls col-xs-7 ">
                <input type="text" class="input-text" value="" placeholder="" id="username" name="username" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 " style="text-align: center;"><span class="c-red">*</span>密码：</label>
            <div class="formControls col-xs-7 ">
                <input type="password" class="input-text" value="" placeholder="" id="password" name="password" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 " style="text-align: center;"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-xs-7 ">
                <input type="text" class="input-text" value="" placeholder="" id="email" name="email" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 " style="text-align: center;">角色：</label>
            <div class="formControls col-xs-7 ">
                <select name="roles" id="roles" multiple="multiple" style="width: 250px;">
                <option th:each="role:${roles}" th:value="${role.id}"
                        th:text="${role.name}"
                ></option>
                </select>
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-8 col-xs-offset-3">
                <input class="btn btn-primary radius" id="submit" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;" />
            </div>
        </div>



    </form>
</article>


    <script type="text/javascript" th:src="@{/H-UI/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
    <script type="text/javascript" th:src="@{/H-UI/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
    <script>
        $(function(){
            $("#form-add").validate({
                rules:{
                    username:{required:true},
                    password:{required:true},
                    email:{required:true,email:true},

                },message:{
                    name:{required:"必填"}
                }
            });

            $("#submit").on('click',function(){
                if($("#form-add").valid()){


                    $.ajax({
                        url:"/user/save",
                        type:"post",
                        dataType:'json',
                        data:$("#form-add").serialize(),
                        success:function(data){

                            if(data ==1){
                                var index = layer.index;
                                location.replace(location.href);
                                layer.close(index);
                             }
                        }
                    });

                }
            });



        });

    </script>

